<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container{
        width: 500px;
        height: 300px;
        display: grid;
        /*grid-template-rows: repeat(auto-fill,200px);        !*自动缩放*!
        grid-template-columns: repeat(auto-fill,100px);*/
        grid-template-rows: 1fr 2fr 2fr;    /*按比例划分*/
        grid-template-columns: 1fr 2fr 2fr;
        border: 1px solid #40514e;
    }
    .item{
        box-sizing: border-box;
    }
    .item1{
        background: #30e3ca;                                              
    }
    .item2{
        background: #95e1d3;                                              
    }
    .item3{
        background: #eaffd0;                                              
    }
    .item4{
        background: #fce38a;                                              
    }
    .item5{
        background: #f38181;                                              
    }
    .item6{
        background: #71c9ce;                                              
    }
    .item7{
        background: #a6e3e9;                                              
    }
    .item8{
        background: #cbf1f5;                                              
    }
    .item9{
        background: #e3fdfd;                                              
    }

</style>
<body>
<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
    <div class="item item6"></div>
    <div class="item item7"></div>
    <div class="item item8"></div>
    <div class="item item9"></div>
</div>
</body>
</html>